<template>
  <main class="overview">
    <section class="main-left">
      <div class="left-top">
        <div class="patient-overview">
          <div class="total-patients">
            <p class="title">
              患者总数<span>{{ patientData.totalInHospitalPatient }}</span>
            </p>
            <div class="patient-sta">
              <div class="cont">
                <div>
                  <div class="nurse-level" style="background: #ff0000">
                    特级护理（{{ patientData.superfineLevelNum }}）
                  </div>
                  <div class="bed-num bottom-border-e0eefa">
                    <span
                      v-for="(item, i) in patientData.superfineLevelList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div>
                  <div class="nurse-level" style="background: #2e6aed">
                    一级护理（{{ patientData.oneLevelNum }}）
                  </div>
                  <div class="bed-num bottom-border-e0eefa">
                    <span
                      v-for="(item, i) in patientData.oneLevelList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div>
                  <div class="nurse-level" style="background: #ff9600">
                    二级护理（{{ patientData.twoLevelNum }}）
                  </div>
                  <div class="bed-num bottom-border-e0eefa">
                    <span
                      v-for="(item, i) in patientData.twoLevelList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div>
                  <div class="nurse-level" style="background: #00b95e">
                    三级护理（{{ patientData.threeLevelNum }}）
                  </div>
                  <div class="bed-num">
                    <span
                      v-for="(item, i) in patientData.threeLevelList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="free-beds">
            <p class="title">
              剩余床位<span>{{ patientData.surplusBedNo }}</span>
            </p>
            <div class="bed-sta">
              <div class="cont">
                <div>
                  <div class="disease-level">
                    病危（{{ patientData.beTerminallyIllNum }}）
                  </div>
                  <div class="bed-num bottom-border-e0eefa">
                    <span
                      v-for="(item, i) in patientData.beTerminallyIllList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div>
                  <div class="disease-level">
                    病重（{{ patientData.seriouslyIllNum }}）
                  </div>
                  <div class="bed-num bottom-border-e0eefa">
                    <span
                      v-for="(item, i) in patientData.seriouslyIllList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div>
                  <div class="disease-level">
                    压疮高危{{ patientData.bardenGradeNum }}）
                  </div>
                  <div class="bed-num bottom-border-e0eefa">
                    <span
                      v-for="(item, i) in patientData.bardenGradeList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
                <div>
                  <div class="disease-level">
                    跌倒高危（{{ patientData.morseGradeNum }}）
                  </div>
                  <div class="bed-num">
                    <span
                      v-for="(item, i) in patientData.morseGradeList"
                      :key="i"
                      @click="handleToPatientDetails(item)"
                      >{{ item }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="in-out">
          <div class="today-in">
            <div class="title">今日入院({{ patientData.todayInHospitalNum }})</div>
            <div class="group">
              <div
                class="item"
                style="background: #ff9e09"
                v-for="(item, i) in patientData.todayInHospitalList"
                :key="i"
                @click="handleToPatientDetails(item.bedNo)"
              >
                <span>{{ item.benNo }}</span>
                <span>{{ item.ptnName }}</span>
              </div>
            </div>
          </div>
          <div class="today-out">
            <div class="title">
              <div class="decorate"></div>
              <div>今日出院({{ patientData.todayOutHospitalNum }})</div>
            </div>
            <div class="group">
              <div
                class="item"
                style="background: #93d82d"
                v-for="(item, i) in patientData.todayOutHospitalList"
                :key="i"
              >
                <span>{{ item.benNo }}</span>
                <span>{{ item.ptnName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left-bottom">
        <!-- @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd" -->
        <img
          ref="imageMap"
          :src="imgUrl"
          alt="病房分布2D图"
          usemap="#map"
          style="width: 100%; height: 100%"
        />
        <map name="map">
          <area
            v-for="(item, i) in wardFilterData"
            :key="i"
            shape="rect"
            :coords="
              item.x +
              ',' +
              item.y +
              ',' +
              (item.x + item.width) +
              ',' +
              (item.y + item.height)
            "
            href="#"
            alt="001房"
            @click="handleShowWardInfo(item.rmNumber)"
          />
        </map>
      </div>
    </section>
    <aside class="main-right">
      <div class="nurse gradient-bg">
        <div class="bottom-border-fff flex-align-center" style="padding-bottom: 0.5vh">
          <img src="../../assets/images/duty-nurse.svg" alt="" />
          <span class="title">值班护士</span>
        </div>
        <div class="nurse-name">
          <span v-for="(item, i) in workNurseData" :key="i">{{ item }}</span>
        </div>
      </div>
      <div class="note gradient-bg" @click="handleShowEditor('备注编辑', noteData)">
        <div class="bottom-border-fff flex-align-center" style="padding-bottom: 0.5vh">
          <img src="../../assets/images/notes.svg" alt="" />
          <span class="title">备注</span>
        </div>
        <div class="note-group">
          <div style="padding: 5px 0" v-html="noteData"></div>
        </div>
      </div>
      <div class="notice gradient-bg" @click="handleShowEditor('通知编辑', noticeData)">
        <div class="bottom-border-fff flex-align-center" style="padding-bottom: 0.5vh">
          <img src="../../assets/images/notice.svg" alt="" />
          <span class="title">通知</span>
        </div>
        <div class="notice-group">
          <div style="padding: 5px 0" v-html="noticeData"></div>
        </div>
      </div>
      <div
        class="phone gradient-bg"
        @click="handleShowEditor('应急电话编辑', emergencyTelephoneData)"
      >
        <div class="bottom-border-fff flex-align-center" style="padding-bottom: 0.5vh">
          <img src="../../assets/images/phone.svg" alt="" />
          <span class="title">应急电话</span>
        </div>
        <div class="phone-group">
          <div style="padding: 5px 0" v-html="emergencyTelephoneData"></div>
        </div>
      </div>
    </aside>
  </main>
  <RichEditor
    :show-editor="showRichTextEditor"
    :title="editorTitle"
    :text="editorText"
    @changeShowEditor="(value) => (showRichTextEditor = value)"
    @getModifiedText="echoContent"
  />
  <WardInfo
    :show-info="showWradInfo"
    :title="wradTitle"
    :popupWidth="50"
    @nextWard="handleNextWard"
    @changeFlag="handleChangeFlag"
    @click.stop="showWradInfo = !showWradInfo"
  >
    <template v-if="wardInfoFlag === 0">
      <OPCard
        v-for="(item, i) in curWardPatients"
        :key="i"
        :patient="item"
        @click="handleToPatientDetails(item.bedNo)"
      />
    </template>
    <template v-else>
      <el-table :data="inspectionInfo" :header-cell-style="{ color: '#4D7DD2' }">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          min-width="30"
        ></el-table-column>
        <el-table-column prop="ptnName" label="患者名称" align="center" min-width="50" />
        <el-table-column
          prop="conclusion"
          label="查房结论"
          align="center"
          min-width="50"
        />
        <el-table-column prop="inspector" label="查房人员" align="center" />
        <el-table-column prop="patrolTime" label="查房时间" align="center" />
      </el-table>
    </template>
  </WardInfo>
</template>

<script setup>
import mapImage from "@/assets/images/2dMap.png";
import RichEditor from "./component/richEditor.vue";
import WardInfo from "./component/wardInfo.vue";
import OPCard from "./component/overviewPatientCard.vue";
import getImageInstance from "@/utils/loadImage.js";
import {
  get_patientData,
  get_workNurse,
  get_whiteboardMemo,
  modify_whiteboardMemo,
  get_whiteboardNotice,
  modify_whiteboardNotice,
  get_whiteboardDeptPhone,
  modify_whiteboardDeptPhone,
  get_whiteboardWardInfo,
  get_whiteboardWardPatientInfo,
  get_whiteboardPatrolWardInfo,
} from "@/apis/overview.js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

//住院患者信息总览
let patientData = ref({
  bardenGradeList: [],
  bardenGradeNum: 0,
  beTerminallyIllList: [],
  beTerminallyIllNum: 0,
  morseGradeList: [],
  morseGradeNum: 0,
  oneLevelList: [],
  oneLevelNum: 0,
  seriouslyIllList: [],
  seriouslyIllNum: 0,
  superfineLevelList: [],
  superfineLevelNum: 1,
  surplusBedNo: 0,
  threeLevelList: [],
  threeLevelNum: 0,
  todayInHospitalList: [],
  todayInHospitalNum: 0,
  todayOutHospitalList: [],
  todayOutHospitalNum: 0,
  totalInHospitalPatient: 0,
  twoLevelList: [],
  twoLevelNum: 0,
});
//值班护士数据
let workNurseData = ref([]);
//备注数据
let noteData = ref("");
//通知数据
let noticeData = ref("");
//应急电话
let emergencyTelephoneData = ref("");

let wardInfoList = ref(); //病房信息列表
let imgUrl = ref(mapImage); //图片地址
let imageMap = ref(null); //地图实例
let showWradInfo = ref(false); //病房信息弹窗显隐标识
let wradTitle = ref("007病房"); //病房名称
let wardInfoFlag = ref(0); //病房信息弹窗显隐标识
let curRmNumber = ref(""); //当前病房号
let curWardPatients = ref(); //当前病房患者
let inspectionInfo = ref(); //查房信息
let showRichTextEditor = ref(false); //控制编辑器显隐
let editorTitle = ref(""); //编辑器标题
let editorText = ref(""); //编辑器回显内容

let wardFilterData = ref(); //过滤出的病房
let bedFilterData = ref(); //过滤出的病床
let rmNumberList = ref(); //病房号列表

//如果IP地址已经设置了，才允许发送请求
if (localStorage.getItem("#server")) {
  getPatientData();
  getWorkNurse();
  getNoteData();
  getNoticeData();
  getPhoneData();
  getWhiteboardWardInfo();
}

//获取住院患者信息
async function getPatientData() {
  let res = await get_patientData();
  patientData.value = res.data;
}
// getPatientData();

//获取值班护士列表
async function getWorkNurse() {
  let res = await get_workNurse();
  workNurseData.value = res.data;
}
// getWorkNurse();

//获取备注数据
async function getNoteData() {
  let res = await get_whiteboardMemo();
  noteData.value = res.data[0].content;
}
// getNoteData();

//获取通知数据
async function getNoticeData() {
  let res = await get_whiteboardNotice();
  noticeData.value = res.data[0].content;
}
// getNoticeData();

//获取应急电话数据
async function getPhoneData() {
  let res = await get_whiteboardDeptPhone();
  emergencyTelephoneData.value = res.data.content;
}
// getPhoneData();

//右侧功能栏对应的富文本编辑器显示与隐藏
function handleShowEditor(title, text) {
  showRichTextEditor.value = true;
  editorTitle.value = title;
  editorText.value = text;
}
//回显富文本编辑器内容
function echoContent(html) {
  switch (editorTitle.value) {
    case "备注编辑":
      noteData.value = html;
      modify_whiteboardMemo({ content: noteData.value });
      break;
    case "通知编辑":
      noticeData.value = html;
      modify_whiteboardNotice({ content: noticeData.value });
      break;
    case "应急电话编辑":
      emergencyTelephoneData.value = html;
      modify_whiteboardDeptPhone({ content: emergencyTelephoneData.value });
      break;
  }
  showRichTextEditor.value = false;
}

//获取病房信息列表
async function getWhiteboardWardInfo() {
  let res = await get_whiteboardWardInfo();
  wardInfoList.value = res.data;
  wardFilterData.value = res.data.filter((item) => item.type === "0");
  bedFilterData.value = res.data.filter((item) => item.type === "1");
  rmNumberList.value = wardFilterData.value.map((item) => item.rmNumber);
}
// getWhiteboardWardInfo();

//显示病房的病人信息(根据病房编码查询)
function handleShowWardInfo(rmNumber) {
  showWradInfo.value = true;
  wradTitle.value = rmNumber + "病房";
  curRmNumber.value = rmNumber;
  getPatientDataByRmNumber(rmNumber);
  getInspectionInfoByRmNumber(rmNumber);
}

//控制基本信息和查房信息的切换
function handleChangeFlag(val) {
  wardInfoFlag.value = val;
}

//根据病房号获取患者列表
async function getPatientDataByRmNumber(rmNumber) {
  let res = await get_whiteboardWardPatientInfo({ rmNumber });
  curWardPatients.value = res.data;
}

//根据病房号获取查房信息
async function getInspectionInfoByRmNumber(rmNumber) {
  let res = await get_whiteboardPatrolWardInfo({ rmNumber });
  inspectionInfo.value = res.data;
}

//点击右三角查询下一个病房的信息
function handleNextWard() {
  let index = rmNumberList.value.findIndex((item) => item === curRmNumber.value);
  curRmNumber.value =
    index === rmNumberList.value.length - 1
      ? rmNumberList.value[0]
      : rmNumberList.value[index + 1];
  handleShowWardInfo(curRmNumber.value);
}

//查看病人详情(将床位发送到详情页，用于查询病人详情)
function handleToPatientDetails(item) {
  router.push({
    path: "/patientDetails",
    query: { bedNo: item },
  });
}
</script>

<style lang="scss" scoped>
.overview {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 1vw;
  height: 100%;
  .main-right {
    background: #fff;
    padding: 1vh 1vw;
    border-radius: 15px;
    font-size: 0.8vw;
    overflow-y: auto;
    /* 隐藏默认的滚动条样式 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    display: grid;
    grid-template-columns: 1;
    > div {
      margin-bottom: 0.8vh;
      padding: 0.5vh 0.5vw;
      img {
        width: 1.5vw;
        height: 2.5vh;
        margin-right: 0.4vw;
      }
      .title {
        font-size: 0.9vw;
        color: #0043be;
        font-weight: 550;
      }
    }
    > div:last-child {
      margin-bottom: 0;
    }
    .nurse {
      .nurse-name {
        padding-top: 1vh;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(3.8vw, 1fr));
        span {
          display: block;
          margin-bottom: 1vh;
          width: 3.8vw;
          height: 2.5vh;
          text-align: center;
          line-height: 2.5vh;
          background: #aad3ff;
          color: #1151c4;
          border-radius: 3px;
        }
      }
    }
  }
  .main-right::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
  .main-left {
    display: flex;
    flex-direction: column;
    .left-top {
      display: flex;
      .patient-overview {
        flex: 3;
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        margin-right: 1vw;
        display: flex;
        > div {
          display: flex;
          flex-direction: column;
          .title {
            background: #def1ff;
            padding: 0.7vh 0;
            padding-left: 0.8vw;
            span {
              font-size: 1.1vw;
              margin-left: 5px;
              vertical-align: middle;
            }
          }
          .cont {
            height: 100%;
            border: 2px solid #e0eefa;
            display: flex;
            flex-direction: column;
            > div {
              flex: 1;
              display: flex;
              .nurse-level {
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 6vw;
              }
              .disease-level {
                background: #d2e8ff;
                color: #0043be;
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 6vw;
              }
              .bed-num {
                flex: 1;
                display: flex;
                align-items: center;
                max-width: 22vw;
                overflow-x: auto;
                /* 隐藏默认的滚动条样式 */
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* IE and Edge */

                span {
                  display: inline-block;
                  min-width: 2.2vw;
                  margin: 0 0.5vw;
                }
              }
              .bed-num::-webkit-scrollbar {
                display: none; /* Chrome, Safari, and Opera */
              }
            }
          }
        }

        .total-patients {
          flex: 1;
          .title {
            border-right: 0.2rem solid #fff;
          }
          .patient-sta {
            flex: 1;
            padding: 1% 0% 1% 2%;
          }
        }
        .free-beds {
          flex: 1;
          .bed-sta {
            flex: 1;
            padding: 1% 0% 1%;
          }
        }
      }
      .in-out {
        flex: 1;
        display: flex;
        border-radius: 15px;
        overflow: hidden;
        > div {
          flex: 1;
        }
        .title {
          font-size: 0.8vw;
          font-weight: 550;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 1.2vh 0;
          background: #dff1ff;
        }
        .group {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          padding: 0.6vw;
          gap: 0.4vw;
          background: #fff;
          font-size: 0.7vw;
          height: 7.6vw;
          overflow-y: auto;
          /* 隐藏默认的滚动条样式 */
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */
          .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
          }
        }
        .group::-webkit-scrollbar {
          display: none; /* Chrome, Safari, and Opera */
        }
      }
      .today-in {
        border-right: 0.2rem solid #fff;
      }
    }
    .left-bottom {
      flex: 1;
      // max-width: 78vw;
      // max-height: 58vh;
      margin-top: 1vw;
      background: #fff;
      border-radius: 15px;
      // overflow: auto;
      // /* 隐藏默认的滚动条样式 */
      // scrollbar-width: none; /* Firefox */
      // -ms-overflow-style: none; /* IE and Edge */
    }
    // .left-bottom::-webkit-scrollbar {
    //   display: none; /* Chrome, Safari, and Opera */
    // }
  }
}

.bottom-border-fff {
  border-bottom: 2px solid #fff;
}
.bottom-border-e0eefa {
  border-bottom: 2px solid #e0eefa;
}
.gradient-bg {
  background: linear-gradient(#e0ecfa, #edf4fb);
}
.flex-align-center {
  display: flex;
  align-items: center; /* 垂直居中 */
}
</style>
